<template>
  <CustomModel @register="registerModal" @success="handleSuccess" @cancel="handleClose" />
  <CustomDrawer @register="registerDrawer" @success="handleSuccess" @cancel="handleClose" />
  <CustomePageModel @register="registerInfo" @success="handleSuccess" @cancel="handleClose" />
  <CustomDetail
    @success="handleSuccess"
    ref="customDetail"
    @register="toggle"
    @cancel="handleClose"
  />
  <CustomPage @register="open" @cancel="handleClose" />
</template>

<script setup lang="ts">
  import CustomModel from './CustomModel.vue';
  import CustomDrawer from './CustomDrawer.vue';
  import CustomePageModel from './CustomePageModel.vue';
  import CustomDetail from './CustomDetail.vue';
  import CustomPage from './CustomPage.vue';

  import { useDrawer } from '/@/components/Drawer';
  import { useModal } from '/@/components/Modal';
  import { ref } from 'vue';

  const emits = defineEmits(['register', 'success', 'cancel']);

  // const props = defineProps({
  //   value: {
  //     type: Object,
  //     default: () => {},
  //   },
  // });

  // ---------- 通用弹框配置 start ---------
  const [registerModal, { openModal }] = useModal();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerInfo, { openDrawer: openInfo }] = useDrawer();
  const customDetail = ref<any>(null);

  const handleSuccess = (data) => {
    emits('success', data);
  };
  const handleClose = () => {
    emits('cancel');
  };
  let openCallback: Fn;
  let openPageCallback: Fn;

  const openDetail = (visible, data) => {
    openCallback(visible, data);
  };

  const toggle = (callback) => {
    openCallback = callback;
  };

  const open = (callback) => {
    openPageCallback = callback;
  };
  const openPage = (visible, data) => {
    openPageCallback(visible, data);
  };

  emits('register', {
    openModal,
    openDrawer,
    openPageDrawer: openInfo,
    openDetail,
    openPage,
  });
</script>

<style lang="less" scoped></style>
